<template>
  <div>
    <!-- 个人中心 -->
    <div>
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="120px"
        status-icon
        hide-required-asterisk="false"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="ruleForm.username" />
        </el-form-item>
        <el-form-item label="原始密码" prop="password">
          <el-input v-model="ruleForm.password" />
        </el-form-item>
        <el-form-item label="新密码" prop="repassword">
          <el-input v-model="ruleForm.repassword" />
        </el-form-item>
        <el-form-item label="电话号码" prop="phone">
          <el-input v-model="ruleForm.phone" />
        </el-form-item>
      </el-form>
    </div>
    <span class="dialog-footer">
      <el-button type="primary" @click="submitFormAdd(ruleFormRef)"
        >提交</el-button
      >
      <el-button @click="resetForm(ruleFormRef)">重置表单</el-button>
      <el-button @click="0">取消</el-button>
    </span>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
import request from '../../utils/request'
import { ElNotification } from 'element-plus'
import { useRouter } from 'vue-router'
export default {
  components: {},
  setup() {
    const user = JSON.parse(localStorage.getItem('userInfo')).user
    const ruleFormRef = ref({})
    const ruleForm = reactive({
      password: '',
      repassword: '',
      phone: user.phone,
      username: user.username,
      userId: user.userId,
      beforeName: user.username,
    })
    
    const checkPhone = (rule, value, callback) => {
      if (/^((0\d{2,3}-?\d{7,8})|(1[3465789]\d{9}))$/.test(value) == false) {
        callback(new Error(rule.message))
      } else {
        callback()
      }
    }

    console.log(user.user, 111)
    const lxfs = /^((0\d{2,3}-?\d{7,8})|(1[3465789]\d{9}))$/ //验证电话
    const router = useRouter()

    //判断用户名是否存在
    const isExist = ref(false)
    const adminIsExist = ref(false)
    const checkUserName = async (rule, value, callback) => {
      isExist.value = await handleExist()
      adminIsExist.value = await handleAdminIsExist()
      if (
        ruleForm.beforeName != ruleForm.username &&
        (isExist.value == true || adminIsExist.value == true)
      ) {
        callback(new Error(rule.message))
      } else {
        callback()
      }
    }

    const handleExist = async () => {
      return await request
        .request({
          url: '/user/getUserIsExist',
          method: 'get',
          params: {
            username: ruleForm.username,
          },
        })
        .then((res) => {
          return res.data.data.isExist
          // }
        })
    }
    const handleAdminIsExist = async () => {
      return await request
        .request({
          url: '/user/getAdminIsExist',
          method: 'get',
          params: {
            username: ruleForm.username,
          },
        })
        .then((res) => {
          return res.data.data.isExist
          // }
        })
    }
    const rules = reactive({
      username: [
        {
          required: true,
          message: '请输入用户名',
          trigger: 'blur',
        },
        {
          validator: checkUserName,
          message: '用户名重复，请重新输入',
        },
      ],
      phone: [
        {
          required: false,
          message: '请输入电话号码',
          trigger: 'blur',
        },
        {
          validator: checkPhone,
          message: '请输入正确的电话号码',
        },
      ],
    })


    // 重置表单
    const resetForm = (formEl) => {
      if (!formEl) return
      formEl.resetFields()
    }

    const formData = ref(null)
    //修改个人资料
    const submitFormAdd = async (formEl) => {
      if (!formEl) return
      await formEl.validate((valid, fields) => {
        if (valid) {
          request
            .request({
              url: '/user/updateAdmin',
              method: 'post',
              data: {
                userId: ruleForm.userId,
                username: ruleForm.username,
                opassword: ruleForm.password,
                npassword: ruleForm.repassword,
                phone: ruleForm.phone,
              },
            })
            .then((res) => {
              console.log(res)
              if (res.data.code == 200) {
                ElNotification({
                  title: '修改成功',
                  message: '成功修改用户密码',
                })
                router.push('Login')
              } else if (res.data.data.code == 502) {
                ElNotification({
                  title: '修改失败',
                  message: '原始密码不正确',
                })
              } else {
                ElNotification({
                  title: '修改失败,用户名已存在',
                  message: '用户名已存在',
                })
              }
            })
            .catch((e) => {
              console.log(e)
              ElNotification({
                title: '添加失败,用户名已存在',
                message: '请联系管理员检查失败原因' + e,
              })
            })
        } else {
          ElNotification({
            title: '校验失败',
            message: '请重新填写信息',
          })
        }
      })
    }

    return {
      ruleForm,
      ruleFormRef,
      rules,
      resetForm,
      submitFormAdd,
    }
  },
}
</script>

<style lang="scss" scoped></style>

<style>
.el-upload--text {
  height: auto;
  width: auto;
}

.mavonEditor {
  width: 100%;
  height: 100%;
}
</style>
